import React, { useState, useEffect } from 'react'
import { View, Text, TextInput, ScrollView, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import Checkbox from '../Checkbox'
import renderNode from '../helpers/renderNode'
type Options = {
  label: string,
  value: string
}
type Props = {
  value: string[],
  onChange: (value: string[]) => void,
  children?: React.ReactNode,
  options?: Options[],
  name?: string,
  disabled?: boolean,
  activeIcon?: React.ReactElement<{}>,
  inactiveIcon?: React.ReactElement<{}>,
  rightIcon?: boolean,
  checkedColor?: string,
  style?: StyleProp<ViewStyle>;
}
const CheckboxGroup = ({ value, onChange, options, ...rest }: Props) => {
  const [_value, setValue] = useState<string[]>(value)
  const checkRadio = (val: string) => {
    const _have = _value.includes(val)
    setValue((prev) => {
      if (_have) {
        prev.splice(prev.indexOf(val), 1)
      } else {
        prev.push(val)
      }
      return [...prev]
    })
    onChange(_value)
  }
  return (
    <View style={rest.style}>
      {options && options.map((item, index) => {
        return (
          <Checkbox onPress={checkRadio} checked={_value.includes(item.value)} key={index} {...item} {...rest}></Checkbox>
        )
      })}
      {rest.children && (
        React.Children.toArray(rest.children).map((child: any) => {
          return React.cloneElement(child as React.ReactElement<any>, {
            onPress: checkRadio,
            checked: _value.includes(child?.props.value),
            name: rest.name,
            disabled: child?.props.disabled || rest.disabled,
            activeIcon: child?.props.activeIcon || rest.activeIcon,
            inactiveIcon: child?.props.inactiveIcon || rest.inactiveIcon,
            rightIcon: child?.props.rightIcon || rest.rightIcon,
            checkedColor: child?.props.checkedColor || rest.checkedColor,
          })
        })
      )
      }
    </View>

  )
}

export default CheckboxGroup